<!-- 商品规格选择 -->
<template>
	<view class="container">
		<view class="panel" :style="{'borderBottomWidth': safeAreaBottom, 'paddingBottom': paddingBottom}" :class="{'active': isShowPanel}">
			<!-- 商品信息 -->
			<view class="info">
				<image class="pic" src="/pagesC-shopping/static/images/will-delete/02.png" mode="aspectFit"
					@click="handlePreview()"></image>
				<view class="content">
					<view class="header">
						<text class="name">舒绝瓶装红火蚁药红蚂蚁杀蚁专用饵剂 蚁专用饵剂</text>
						<button class="close-btn iconfont btn-transition-scale9"
							@click="handleClose()">&#xe60d;</button>
					</view>
					<view class="price-box">
						<text class="now">¥8.9</text>
						<text class="old">¥10.9</text>
					</view>
				</view>
			</view>
			<!-- 规格 -->
			<view class="combo">
				<text class="title">规格</text>
				<view class="tag-group">
					<text class="tag active">450ml</text>
					<text class="tag">500ml</text>
					<text class="tag">800ml</text>
					<text class="tag">1000ml</text>
					<text class="tag">1200ml</text>
				</view>
			</view>
			<!-- 数量 -->
			<view class="count">
				<text class="title">数量</text>
				<view class="options">
					<button class="minus-btn iconfont">&#xe60f;</button>
					<input class="num-input" type="number" value="1" />
					<button class="plus-btn iconfont">&#xe60e;</button>
				</view>
			</view>
			<!-- 按钮 -->
			<button class="add-btn btn-transition-scale95" @click="handleAdd()">加入购物车</button>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import { useGoodsDetailStore } from '../store.js';

	// 底部安全距离
	const safeAreaBottom = getApp().globalData.safeAreaBottom + 'px';
	const paddingBottom = getApp().globalData.safeAreaBottom > 0 ? '0px': '30rpx';

	const handlePreview = () => {
		// 预览图片
		uni.previewImage({
			urls: ['/pagesC-shopping/static/images/will-delete/02.png'],
		});
	}

	const isShowPanel = ref(false);

	onMounted(() => {
		setTimeout(() => {
			isShowPanel.value = true;
		});
	});

	// 关闭
	const handleClose = () => {
		isShowPanel.value = false;
		setTimeout(() => {
			useGoodsDetailStore().HIDE_COMBO_PANEL();
		}, 200);
	}
	
	const handleAdd = () => {
		uni.showToast({
			icon: 'success',
			title: '加入成功'
		});
		handleClose();
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 100%;
		height: 100%;
		background: rgba(34, 34, 34, 0.6);

		.panel {
			padding: 28rpx 40rpx 30rpx;
			border-width: 0;
			background-color: white;
			border-color: transparent;
			border-style: solid;
			transform: translateY(100%);
			transition: transform 0.2s;

			&.active {
				transform: translateY(0);
			}
		}
	}

	.info {
		display: flex;
		align-items: center;

		.pic {
			width: 90rpx;
			height: 90rpx;
		}

		.content {
			flex-grow: 1;
			padding-left: 20rpx;

			.header {
				display: flex;
				align-items: center;

				.name {
					flex-grow: 1;
					width: 0;
					font-weight: bold;
					font-size: 30rpx;
					color: #222222;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					padding-right: 20rpx;
				}

				.close-btn {
					font-size: 28rpx;
					color: #999999;
					background-color: transparent;
				}
			}

			.price-box {
				.now {
					font-weight: bold;
					font-size: 30rpx;
					color: #FE3333;
				}

				.old {
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
					margin-left: 10rpx;
				}
			}
		}
	}

	.combo {
		margin-top: 34rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
		}

		.tag-group {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -18rpx 0 -34rpx;

			.tag {
				min-width: 140rpx;
				height: 58rpx;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
				line-height: 58rpx;
				background: #F5F5F5;
				border-radius: 32rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin: 28rpx 0 0 34rpx;

				&.active {
					font-weight: bold;
					color: #FE3333;
					background: #FFEFF4;
				}
			}
		}
	}

	.count {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 88rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
		}

		.options {
			display: flex;
			align-items: center;

			.minus-btn {
				width: 74rpx;
				height: 56rpx;
				font-size: 18rpx;
				color: #222222;
				text-align: center;
				line-height: 56rpx;
				border: 1rpx solid #E5E5E5;
				border-right-width: 0;
				border-radius: 30rpx 0 0 30rpx;
			}

			.num-input {
				width: 60rpx;
				height: 56rpx;
				font-size: 26rpx;
				color: #222222;
				text-align: center;
				line-height: 56rpx;
				border: 1rpx solid #E5E5E5;
				box-sizing: border-box;
			}

			.plus-btn {
				width: 74rpx;
				height: 56rpx;
				font-size: 18rpx;
				color: #222222;
				text-align: center;
				line-height: 56rpx;
				border: 1rpx solid #E5E5E5;
				border-left-width: 0;
				border-radius: 0 30rpx 30rpx 0;
			}
		}
	}

	.add-btn {
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		color: white;
		text-align: center;
		line-height: 88rpx;
		border-radius: 50rpx;
		background-color: #FE3333;
		margin-top: 52rpx;
	}
</style>